<template>
	<div>
		<div class="title">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path: '/task' }">任务管理</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path: '/showProcessTask/' + this.taskid }">任务处理详情</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="xq">
			<div class="icon">
				<i class="el-icon-edit-outline"></i>
			</div>

			<b><span class="top">任务处理详情</span></b>
			<el-row>
				<el-col :span="24" style="text-align: right;">
					<el-button type="primary" @click="">返回</el-button>
			
					
				</el-col>
			</el-row>
		</div>


		<el-form :model="pojo" label-position="right" label-width="120px">
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="任务名称">
					 <el-input v-model="pojo.taskName" disabled></el-input>
						
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="任务编号">
					 <el-input v-model="pojo.taskId" disabled></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="充电站名称">
						  <el-input v-model="pojo.cname" disabled></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="充电站负责人">

						  <el-input v-model="pojo.uname" disabled></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="工作周期">

						  <el-input v-model="pojo.workCycle" disabled></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="任务类型">

						 <el-input v-model="pojo.taskType" disabled></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="开始时间">

						  <el-input v-model="pojo.startTime" disabled></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="结束时间">
						 <el-input v-model="pojo.endTime" disabled></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="执行人员">

						 <el-input v-model="pojo.zname" disabled></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="任务状态">
					   <el-input v-model="pojo.status" disabled></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="24">
					<el-form-item label="任务说明">
						<el-input type="textarea" v-model="pojo.task" :rows="4" disabled></el-input>
					</el-form-item>
					<el-form-item label="处理说明">
						<el-input type="textarea" v-model="pojo.instructions" :rows="4" disabled></el-input>
					</el-form-item>
					<!-- <img width="100%" :src="dialogImageUrl" alt="" /> -->
					<el-form-item label="充电桩图片" prop="pojo.image" required>
						
						 <div v-for="(path, index) in imagePaths" :key="index" style="display: inline-block; position: relative;">
						        <img :src="path" alt="Image" style="width: 100px; height: 100px; margin: 5px;">
						      </div>
						
					</el-form-item>
				</el-col>
			</el-row>


		


		</el-form>
	</div>





</template>

<script>
	import axios from 'axios';
	import {
		findTaskById,
		
	} from "@/api/task/Task"; // 确保此路径正确
	export default {
		data() {
			return {
				pojo: {},
				taskid: "",
				znameList: "",
				stationList: "",
				chargerImagefileList: [],
				chargerImageAction: "bdc/bdc/upload",
				imagePath: "",
				imagePaths: [],
			}
		},

		methods: {
			

			findTaskById() {
				console.log(this.taskid);
				findTaskById(this.taskid).then(res => {
					this.pojo = res
					this.imagePaths = this.pojo.image.split(',').filter(path => path.trim() !== '');
					console.log(res)
				}).catch(error => {
					console.error("获取用户列表失败:", error);
				});
			},
			
			
			





		},
		created() {
			
			this.taskid = this.$route.params.id;
			this.findTaskById()
	


		}
	}
</script>

<style scoped>
	.title {
		margin-top: 20px;
		margin-bottom: 20px;
		margin-left: 20px;
	}

	.top {
		font-size: 15px;
		margin-left: 50px;
	}

	.icon {
		width: 30px;
		height: 30px;
		background-color: skyblue;
		align-items: center;
		text-align: center;
		margin-bottom: -25px;
		font-size: 20px;
		margin-left: 0px;
	}

	.el-form-item__label {
		font-weight: bold;
		color: #606266;
	}

	.el-input,
	.el-select,
	.el-date-picker {
		width: 100%;
	}

	.xq {
		margin-left: 50px;
		margin-bottom: 20px;
	}

	.el-upload__tip {
		line-height: 1.2;
	}
</style>